<template>
  <div class="component-select-container">
    <!--    <el-select v-model="operator" style="width: 100px" clearable size="small" @change="setOperatorToNodeComponent">
          <el-option v-for="item in operators" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>-->
    <el-tree-select v-model="paramsValue"
                    :clearable="true"
                    :data="data"
                    :multiple="props.modelType===MODEL_TYPE.OUTPUT_MODEL"
                    @current-change="setNodeComponent"
                    @clear="clearNodeComponent"
                    @remove-tag="removeTag"
                    size="small"
    >
      <template #default="{ node,data}">
        <template v-if="data.value==='2'">
          <div>
            {{ data.label }}
          </div>
        </template>
        <template v-else>
          {{ data.label }}
        </template>
      </template>
    </el-tree-select>
    <el-input v-if="paramsValue?.[0]=='1'" size="small" v-model="props.nodeData.defaultValue" />
  </div>
</template>
<script setup lang="ts">
// import { defineOptions, reactive, ref } from 'vue'

import { SchemaNode } from '@coolphk/shared-types/low-code'
import { getWidgetOrField, traverseAllWidgets } from '@/utils/util'
import { useDesigner } from '@/composable'
import { isArray } from 'lodash-es'
import { ModelType } from '@/types/setting'
import { MODEL_TYPE } from '@/utils/constants'

defineOptions({
  name: 'component-select',
})
type Props = {
  nodeData: SchemaNode,
  modelType: ModelType
}
const props = defineProps<Props>()
const allWidgets = reactive([])
// const paramsValue = ref(props.nodeData.component ? props.nodeData.component : null)
const designer = useDesigner()
// console.log('paramsValue', props.nodeData.component)
const paramsValue = computed({
  get() {
    console.log('get paramsValue', props.nodeData.component)
    return props.modelType === MODEL_TYPE.INPUT_MODEL ? props.nodeData.component?.[0] : props.nodeData.component
  },
  set(value) {
    //输入模型每个字段只能绑定一个对象
    if (MODEL_TYPE.INPUT_MODEL) {
      props.nodeData.component = [value as string]
    } else {
      props.nodeData.component = value as string[]
    }
  },
})
const data = reactive([
  {
    label: '默认值',
    value: '1',
  },
  {
    label: '表单组件',
    value: '2',
    children: allWidgets,
  },
])

traverseAllWidgets(useDesigner().widgetList, (w) => {
  if (w.formItemFlag) {
    allWidgets.push({
      label: w.id + '(' + w.options?.label + ')',
      value: w.id,
      type: w.type,
    })
  }
})
// console.log('allWidgets', data)
/**
 * 给树形数据设置值，树形结构要转换为对象结构，提交时按对象结构来获取组件值
 * 如果是固定值，则设置组件为空,并且获取数据模型的默认值
 * 如果是组件，则设置component值
 * @param data
 */
const setNodeComponent = (data, node) => {
  console.log('setNodeComponent', data, paramsValue)
  if (data && node.isLeaf) {
    if (data.value == '1') {
      props.nodeData.component = null
      props.nodeData.defaultValue = props.nodeData.modelValue
    } else {
      /*if (data.type) {
        const serviceFieldKey = getServiceFieldKeyById(data.value)
        if (!serviceFieldKey.includes(props.nodeData.path)) {
          serviceFieldKey.push(props.nodeData.path)
        }
      }*/
      props.nodeData.defaultValue = ''
    }
  }
}
const clearNodeComponent = () => {
  console.log('clearNodeComponent', props.nodeData.component)
}
const removeTag = (value) => {
  console.log('removeTag', value)
  if (value == '1') {
    props.nodeData.component = null
    props.nodeData.defaultValue = props.nodeData.modelValue
  } else {
    props.nodeData.defaultValue = ''
  }
}
const getServiceFieldKeyById = (widgetId: string): string[] => {
  return getWidgetOrField(designer.formWidget.getWidgetRef(widgetId)).options.serviceFieldKey
}
</script>

<style scoped>
.component-select-container {
  display: flex;
  align-items: center;
}
</style>
